<template>
	<view>
		<!-- 门店定位 -->
		<view class="flex location">
			<u-icon name="map" size="20" color="#fe5e10" />
			<view>{{info.name || ''}}</view>
			<text>距离{{ info.distance }}公里</text>
			<u-avatar :src="imgUrl + 'slice.png'" size="40rpx" @click="navigationFun" />
		</view>
		<view class="contentWarp">
			<!-- 工作人员列表 -->		
			<view class="workList" v-if="workerList.length">
				<u-scroll-list>
					<view v-for="v, i in workerList" :key="i" class="item">
						<u-avatar :src="v.avatar" size="104rpx" />
						<view>{{ v.name }}</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 门店介绍 -->
			<template v-if="info.content || info.contentImages.length">
				<view class="title">门店介绍</view>
				<view class="intro">
					<view>{{ info.content }}</view>
					<view class="flex">
						<image
							v-for="item, index in info.contentImages"
							:key="index"
							:src="item"
							mode=""
							@click="previewFun(info.contentImages, index)"
						/>
					</view>
				</view>
			</template>
			<!-- 门店器械介绍 -->
			<template v-if="info.sportsContent || info.sportsContentImages.length">
				<view class="title">器械介绍</view>
				<view class="intro">
					<view>{{ info.sportsContent }}</view>
					<view class="flex">
						<image
							v-for="item, index in info.sportsContentImages"
							:key="index"
							:src="item"
							mode=""
							@click="previewFun(info.sportsContentImages, index)"
						/>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { imgUrl } from "@/utils/baseUrl.js";
import { getWorkerList, getStoreDetail } from '@/api/store.js';
import appointmentOurse from '@/components/appointmentOurse.vue';
export default {
	data() {
		return {
			imgUrl,
			info: {},
			workerList: []
		}
	},
	onLoad(eve) {
		this.getPageData(eve.sign)
	},
	methods: {
		// 获取页面所需数据
		getPageData(storeSign) {
			const _this = this
			// 获取教练列表
			getWorkerList({ storeSign }).then(res => _this.workerList = res.rows)
			// 获取门店详情
			const param = {
				storeSign,
				latitude: 0,
				longitude: 0
			}
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					const {latitude, longitude} = res
					param.latitude = latitude
					param.longitude = longitude
				},
				complete() {
					getStoreDetail(param).then(res => _this.info = res)
				} 
			})
		},
		// 导航
		navigationFun() {
			const {latitude, longitude, name, address} = this.info
			uni.openLocation({
				latitude,
				longitude,
				name,
				address
			})
		},
		// 预览图片
		previewFun(urls, current) {
			uni.previewImage({
				urls,
				current
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.location {
	background-color: #fff;
	padding: 20rpx;
	view {
		color: #434343;
		font-size: 31rpx;
		margin-left: 10rpx;
	}
	text {
		margin: 0 10rpx 0 auto;
		font-size: 23rpx;
		color: rgba(0, 0, 0, 0.4);	
	}
}
.contentWarp {
	padding: 20rpx;
	> view:not(.title) {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.title {
		padding: 24rpx 0;
		font-weight: bold;
	}
}
::v-deep .workList {
	padding: 20rpx 30rpx !important;
	.u-scroll-list {
		padding-bottom: 0;
	}
	.item {
		margin-right: 30rpx;
		font-size: 24rpx;
		text-align: center;
		view {
			margin-top: 15rpx;
		}
	}
	.u-avatar__image {
		border: 4rpx solid #1296db;
		box-sizing: border-box;
	}
}
.intro {
	font-size: 26rpx;
	white-space: pre-wrap;
	.flex {
		flex-wrap: wrap;
	}
	image {
		width: 32%;
		margin-left: 5rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
}
</style>
